import React from 'react'
import QRCode from 'components/qrcode'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../../reducers'
import { actions as UserAction } from '../../../reducers/user'

class Invite extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			shareTip: false
		}
	}

	componentDidMount () {
		this.props.get_user_info()
		
		var qr = new QRCode({
		    toTable: false,
		    ecclevel: 1,
		    borderSize: 0,
		    noBorder: true,
		    colorLight: "#ffffff",
		    colorDark: "#000000"
		});
		qr.url = `${window.location.origin}?invite_id=${this.props.userInfo.id}`;
		qr.init();

		let imgElm = document.getElementById("qrcode-img");
		imgElm.src = qr.toImage("png").src;

	}
    render() {
        return (
			<div class="invitation">
				<div class="sao"><img id="qrcode-img" src="" /></div>
				<button onClick={()=>this.setState({shareTip: true})}>邀请朋友</button>

				<div className="share-tips" style={{display: this.state.shareTip ? 'block' : 'none'}} onClick={() => this.setState({shareTip: false})}>
					<span>点击右上角按钮，分享给朋友</span>
				</div>
			</div>
        )

    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo,
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
        get_user_info: bindActionCreators(UserAction.get_user_info, dispatch),
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Invite)